import React, { useState, useEffect, useCallback } from 'react'
import { useHistory } from 'react-router-dom'

import {
  Grid
} from 'antd-mobile'

import {
  HotCateWrap,
  H1Container
} from './StyledCookBook'

import { get } from '@/utils/http'

export default function HotCate() {

  let [hotCateList, setHotCateList] = useState([])
  let [columnNum] = useState(4)

  const { push } = useHistory()

  useEffect(
    () => {
      (async () => {
        let result = await get({
          url: '/api/hotcat'
          // url: '/mock/cookbook-hotcat.json'
        })
  
        setHotCateList([
          ...result.data,
          {
            title: '更多...'
          }
        ])
      })()
    },
    []
  )

  const handleClick = useCallback(
    ({title}) => {
      push({pathname: '/list', state: { title }})
    },
    [push],
  )

  return (
    <HotCateWrap>
      <H1Container
        width="1px 0 1px 0"
      >热门分类</H1Container>
      <div>
        <Grid 
          data={hotCateList}
          columnNum={columnNum}
          hasLine={false}
          renderItem={dataItem => (
            <div className="grid-item">
              <img src={dataItem.img} alt="" />
              <div>
                <span>{dataItem.title}</span>
              </div>
            </div>
          )}
          onClick={handleClick}
        />
      </div>
    </HotCateWrap>
  )
}